<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>三栏布局</title>
		<style>
			html * {
				padding: 0;
				margin: 0;
			}

			section {
				margin-bottom: 20px;
			}

			section > div {
				height: 100px;
			}
		</style>
	</head>

	<body>
		<section class="float left-center-right">
			<style>
				.float.left-center-right .left {
					float: left;
					width: 300px;
					background: red;
				}

				.float.left-center-right .center {
					background: gainsboro;
					overflow: auto;
				}

				.float.left-center-right .right {
					width: 300px;
					float: right;
					background: yellow;
				}
			</style>
			<div class="left"></div>
			<div class="right"></div>
			<div class="center">
				<h1>三栏布局：float + BFC实现</h1>
				<span>
					远古时代，有姓有氏，姓氏一分为二。姓是大的氏族部落集团的徽示，氏是一个姓所分出的小氏族支系的标志。姓氏合二为一，是秦汉时才开始的。溯嬴姓渊源，颛顼高阳氏之孙皋陶（八恺之庭坚），皋陶生于山西洪洞（一说曲阜），舜因而赐以嬴姓。
					[1]
					嬴姓赵氏始于西周造父，造父为伯益的十五世孙。据《史记》载：“穆王使造父御，西巡狩，见西王母，乐之忘归。而徐偃王反，穆王日驰千里马，攻徐偃王，大破之。乃赐造父以赵城，由此为赵氏。”
				</span>
			</div>
		</section>

		<section class="float left-center-right-1">
			<style>
				.float.left-center-right-1 .left {
					float: left;
					width: 300px;
					background: red;
				}

				.float.left-center-right-1 .center {
					position: relative;
					background: gainsboro;
					margin-left: 300px;
					margin-right: 300px;
				}

				.float.left-center-right-1 .right {
					width: 300px;
					float: right;
					background: yellow;
				}
			</style>
			<div class="left"></div>
			<div class="right"></div>
			<div class="center">
				<h1>三栏布局：float + margin实现</h1>
				<span>
					远古时代，有姓有氏，姓氏一分为二。姓是大的氏族部落集团的徽示，氏是一个姓所分出的小氏族支系的标志。姓氏合二为一，是秦汉时才开始的。溯嬴姓渊源，颛顼高阳氏之孙皋陶（八恺之庭坚），皋陶生于山西洪洞（一说曲阜），舜因而赐以嬴姓。
					[1]
					嬴姓赵氏始于西周造父，造父为伯益的十五世孙。据《史记》载：“穆王使造父御，西巡狩，见西王母，乐之忘归。而徐偃王反，穆王日驰千里马，攻徐偃王，大破之。乃赐造父以赵城，由此为赵氏。”
				</span>
			</div>
		</section>

		<section class="position left-center-right">
			<style>
				.position.left-center-right {
					width: 100%;
					position: relative;
				}

				.position.left-center-right .left {
					position: absolute;
					left: 0;
					width: 300px;
					background: red;
				}

				.position.left-center-right .right {
					position: absolute;
					width: 300px;
					right: 0;
					background: yellow;
				}

				.position.left-center-right .center {
					position: absolute;
					left: 300px;
					right: 300px;
					width: auto;
					background: gainsboro;
				}
			</style>
			<div class="left"></div>
			<div class="center">
				<h1>三栏布局：absolute实现</h1>
				<span>
					远古时代，有姓有氏，姓氏一分为二。姓是大的氏族部落集团的徽示，氏是一个姓所分出的小氏族支系的标志。姓氏合二为一，是秦汉时才开始的。溯嬴姓渊源，颛顼高阳氏之孙皋陶（八恺之庭坚），皋陶生于山西洪洞（一说曲阜），舜因而赐以嬴姓。
					[1]
					嬴姓赵氏始于西周造父，造父为伯益的十五世孙。据《史记》载：“穆王使造父御，西巡狩，见西王母，乐之忘归。而徐偃王反，穆王日驰千里马，攻徐偃王，大破之。乃赐造父以赵城，由此为赵氏。”
				</span>
			</div>
			<div class="right"></div>
		</section>

		<section class="flex left-center-right">
			<style>
				.flex.left-center-right {
					display: flex;
					margin-top: 200px;
				}

				.flex.left-center-right .left {
					width: 300px;
					background: red;
				}

				.flex.left-center-right .center {
					flex: 1;
					background: gainsboro;
				}

				.flex.left-center-right .right {
					width: 300px;
					background: yellow;
				}
			</style>
			<div class="left"></div>
			<div class="center">
				<h1>三栏布局：flex 实现</h1>
				<span>
					远古时代，有姓有氏，姓氏一分为二。姓是大的氏族部落集团的徽示，氏是一个姓所分出的小氏族支系的标志。姓氏合二为一，是秦汉时才开始的。溯嬴姓渊源，颛顼高阳氏之孙皋陶（八恺之庭坚），皋陶生于山西洪洞（一说曲阜），舜因而赐以嬴姓。
					[1]
					嬴姓赵氏始于西周造父，造父为伯益的十五世孙。据《史记》载：“穆王使造父御，西巡狩，见西王母，乐之忘归。而徐偃王反，穆王日驰千里马，攻徐偃王，大破之。乃赐造父以赵城，由此为赵氏。”
				</span>
			</div>
			<div class="right"></div>
		</section>

		<section class="table left-center-right">
			<style>
				.table.left-center-right {
					display: table;
					width: 100%;
				}

				.table.left-center-right div {
					display: table-cell;
				}

				.table.left-center-right .left {
					width: 300px;
					background: red;
				}

				.table.left-center-right .center {
					background: gainsboro;
				}

				.table.left-center-right .right {
					width: 300px;
					background: yellow;
				}
			</style>
			<div class="left"></div>
			<div class="center">
				<h1>三栏布局：table 实现</h1>
				<span>
					远古时代，有姓有氏，姓氏一分为二。姓是大的氏族部落集团的徽示，氏是一个姓所分出的小氏族支系的标志。姓氏合二为一，是秦汉时才开始的。溯嬴姓渊源，颛顼高阳氏之孙皋陶（八恺之庭坚），皋陶生于山西洪洞（一说曲阜），舜因而赐以嬴姓。
					[1]
					嬴姓赵氏始于西周造父，造父为伯益的十五世孙。据《史记》载：“穆王使造父御，西巡狩，见西王母，乐之忘归。而徐偃王反，穆王日驰千里马，攻徐偃王，大破之。乃赐造父以赵城，由此为赵氏。”
				</span>
			</div>
			<div class="right"></div>
		</section>

		<section class="box left-center-right">
			<style>
				.box.left-center-right {
					width: 100%;
					display: grid;
					grid-template-rows: 80px;
					grid-template-columns: 300px auto 300px;
				}

				.box.left-center-right .left {
					background: red;
				}

				.box.left-center-right .center {
					background: gainsboro;
				}

				.box.left-center-right .right {
					background: yellow;
				}
			</style>
			<div class="left"></div>
			<div class="center">
				<h1>三栏布局：网格布局</h1>
				<span>
					远古时代，有姓有氏，姓氏一分为二。姓是大的氏族部落集团的徽示，氏是一个姓所分出的小氏族支系的标志。姓氏合二为一，是秦汉时才开始的。溯嬴姓渊源，颛顼高阳氏之孙皋陶（八恺之庭坚），皋陶生于山西洪洞（一说曲阜），舜因而赐以嬴姓。
					[1]
					嬴姓赵氏始于西周造父，造父为伯益的十五世孙。据《史记》载：“穆王使造父御，西巡狩，见西王母，乐之忘归。而徐偃王反，穆王日驰千里马，攻徐偃王，大破之。乃赐造父以赵城，由此为赵氏。”
				</span>
			</div>
			<div class="right"></div>
		</section>
	</body>
</html>
